<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" router unique-opened
           background-color="#324157" text-color="#bfcbd9" active-text-color="#ffd04b">
    <el-submenu :index="index+''" v-for="(item,index) in navData" :key="index">
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </template>
        <el-menu-item v-for="child in item.children" :key="child.name" :index="child.path">{{child.name}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  import aside from './aside'
  export default {
    data () {
      return {
        navData: aside
      }
    },
    methods: {}

  }
</script>

<style lang="less">
  .el-menu-item, .el-submenu__title {
    height: 40px!important;
    line-height: 40px!important;
    /*border-bottom: 1px solid #ccc;*/
  }
  .el-submenu__title{
    /*background-color: #ccc!important;*/
    /*border-bottom: 1px solid black;*/
  }
  .el-menu-vertical-demo > li:first-child{
    /*background-color: #ccc;*/
    /*border-bottom: 1px solid black;*/
  }
  .el-menu-item.is-active{
    background-color: #242f42!important;
  }
  .el-menu{
    border-right: none;
  }
</style>
